<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			
			
.textlist{
	width: 100%;
	padding: 10px;
}
.checklist{
				background-color: white !important;
				border-radius: 0.5em;
			}
			.flex1{
				width: 85%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0.5em;
			}
			.left{
				width: 25%;
			}
			.left>img{
				border-radius: 50%;
				width: 100%;
			}
			.right{
				padding-left:1em ;
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				color: #676664;
			}
			.right>div{
				padding: 0.2em;
			}
			.listdivcss{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: white;
				border-radius: 0.5em;
				margin: 0.2em 0;
			}
			.mui-checkbox input[type=checkbox]{
				top: 0px !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">报表权限设置</h1>
		</header>
		<div class="mui-content" >
		    <div class="" id="mlist">
		    	
		    </div>
		   	<div class="fgd"></div>
		    <div class="footdiv">
		    	<div class="fleft">
		    		<div class="mui-input-row mui-checkbox ">
		    		    <label>全选</label>
		    		    <input name="Checkbox" id="checkall" type="checkbox">
		    		</div>
		    		<div id="nums">
		    			
		    		</div>
		    	</div>
		    	<div class="fright" id="okbut">
		    		确认
		    	</div>
		    </div>
		</div>
		
		
		
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rid = 0,		//角色id
				rlist = [],		//角色权限数组
				mlist = [];		//门店数组
			window.onload = function(){
				mui.init();
				rid = getrequest().rid||3;
				//console.log(acctoken())
				
				
				//全选监听
				g('checkall').addEventListener('change',function() {
		            var listBox = mui('.listcheckbox');
		            if (this.checked) {
		                listBox.each(function() {
		                    this.checked = true;
		                })
		            } else {
		                listBox.each(function() {
		                    this.checked = false;
		                })
		            }
		            getnums();
		        })
				
				//点击确认
				g("okbut").addEventListener("tap",function(e){
					var listBox = mui('.listcheckbox');
					listBox.each(function() {
						if(this.checked){
							var id = $(this).data("id");
							rlist.push({"store_id":id})
						}
			        })
					var data = {
						url:"/api/role/view_report",
						data:{
							access_token:acctoken(),
							role_id:rid,
							store:rlist,
						}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
					})
				})
				
				get_scope()
				
				
			}
			
			
			function get_scope(){
				var data = {
					url:"/api/role/view_scope_detail",
					data:{
						access_token:acctoken(),
						role_id:rid,
					}
				}
				ajax(data,function(res){
					console.log("角色权限",res);
					getstorelist(res.data.store.join(","));
				})
				
				
			}
			
			
			//复选框事件
			function setcheckbox(e){
				var id = $(e).data("id");
				console.log(id)
				if(!e.checked){
					document.getElementById('checkall').checked = false;
				}
				getnums();
			}
			
			//获取门店列表
			function getstorelist(store){
				var data = {
					url:"/api/store/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log(res);
					mlist = res.data;
					setstorelist(res.data,store);
				})
			}
			//设置门店列表
			function setstorelist(list,store){
				var str = '';
				if(list&&list.length > 0){
					list.forEach(function(item,index){
						str += '<div class="listdivcss"><div class="flex1">'+
		    	    			'<div class="left">';
		    	    			if(item.images&&item.images.path_name){
		    	    				str += '<img src="'+item.images.path_name+'"/>';
		    	    			}else{
		    	    				str +=  '<img src="../../images/user-photo.png"/>';
		    	    			}
		    	    			str += '</div><div class="right"><div id="">'+
		    	    				item.store_name+
		    	    			'</div><div id="" class="fe08">'+
		    	    			item.linkman+
		    	    			'</div><div id="" class="fe08">电话：'+
		    	    				item.phone+
		    	    			'</div></div></div>'+
			    	'<div class="mui-input-row mui-checkbox checklist">'+
			    	    '<label></label>'+
			    	    '<input name="Checkbox" ';
			    	    if(store.match(item.id)){
			    	    	str += ' checked="checked" ';
			    	    }
			    	    str +=' data-id="'+item.id+'" onclick="setcheckbox(this)" class="listcheckbox" type="checkbox">'+
			    	'</div></div>';
						
					})
				}
				
				g("mlist").innerHTML = str;
			}
			
			
			//计算勾选会员
			function getnums(){
				var nums = 0;
				var listBox = mui('.listcheckbox');
				listBox.each(function() {
					if(this.checked){
						nums++;
					}
		        })
				document.getElementById('nums').innerHTML = "共"+ nums +"个门店";
			}
		</script>
	</body>

</html>